<template>
  <div class="box">
    <!-- 导航栏 -->
    <van-nav-bar left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
        <van-icon name="star-o" />
        <van-icon name="share-o" />
      </template>
    </van-nav-bar>
    <!-- 头部基本信息 -->
    <div class="topInfo">
      <div class="title">
        <h3>{{ baseInfo.name }}</h3>
        <img :src="baseInfo.avatar" alt="" />
      </div>
      <p class="psTime">
        <van-icon name="underway-o" />
        <span>配送约{{ baseInfo.deliveryTime }}分钟</span>
      </p>
      <!-- NoticeBar 通知栏组件 -->
      <van-notice-bar
        :scrollable="false"
        color="#999"
        background="#fff"
        :text="baseInfo.bulletin"
      />
      <div class="tagBox">
        <van-tag
          plain
          type="warning"
          v-for="(item, i) in baseInfo.supports"
          :key="i"
          >{{ item.description }}</van-tag
        >
      </div>
    </div>
    <!-- tab切换 -->
    <!-- v-model:active	绑定当前选中标签的标识符 -->
    <van-tabs v-model:active="active">
      <van-tab title="菜单">
        <!-- 左侧列表组件 -->
        <left-list :lList="goods" @getRight="getRights"></left-list>
        <!-- 右侧列表结构 -->
        <div class="rightBox">
          <van-card
            :price="item.price"
            :desc="item.description"
            :title="item.name"
            :thumb="item.image"
            v-for="(item, i) in rightList"
            :key="i"
          >
            <template #tags>
              <van-tag plain type="danger">月售:{{ item.sellCount }}</van-tag>
              <van-tag plain type="danger">赞{{ item.rating }}</van-tag>
            </template>
            <template #footer>
              <!-- 步进器组件 -->
              <van-stepper
                v-if="item.num > 0"
                input-width="20px"
                button-size="15px"
                v-model="item.num"
                @click="add(item)"
              />
              <van-button
                v-else
                type="primary"
                icon="plus"
                size="mini"
                @click="add(item)"
              ></van-button>
            </template>
          </van-card>
        </div>
      </van-tab>
      <van-tab title="评价">
        <div class="rateBox">
          <ul>
            <li v-for="(item, i) in rateList" :key="i">
              <div class="rateTop">
                <div class="leftBox">
                  <img :src="item.avatar" alt="" />
                  <div>
                    <p>{{ item.username }}</p>
                    <span>评分:{{ item.score }}分</span>
                  </div>
                </div>
                <p>{{ new Date(item.rateTime).toLocaleDateString() }}</p>
              </div>
              <p class="rateContent">{{ item.text }}</p>
              <div>
                <van-tag
                  v-for="(obj, idx) in item.recommend"
                  :key="idx"
                  plain
                  type="primary"
                  >{{ obj }}</van-tag
                >
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="商家">
        <div class="business">
          <!-- 轮播图组件 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, i) in baseInfo.pics" :key="i">
              <img :src="item" alt="" />
            </van-swipe-item>
          </van-swipe>
          <van-cell
            v-for="(item, i) in baseInfo.infos"
            :key="i"
            :title="item"
          />
          <van-button type="primary" block>举报商家</van-button>
        </div>
      </van-tab>
    </van-tabs>
    <!--提交订单组件  -->
    <van-submit-bar
      :price="$store.getters.allPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <!-- 徽标组件 -->
      <van-badge :content="$store.getters.allNum">
        <van-icon name="cart-o" :color="colors" @click="show = !show" />
      </van-badge>
    </van-submit-bar>
    <!-- 弹出层 -->
    <van-popup v-model:show="show" position="bottom">
      <div class="cartList">
        <van-cell title="口袋(新增菜品将添加至此口袋)" icon="shop-o" center>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="delete-o" />
            <span @click="remove">清空购物袋</span>
          </template>
        </van-cell>
        <ul>
          <li v-for="(item, i) in $store.state.cartList" :key="i">
            <p>{{ item.name }}</p>
            <span>￥{{ item.price * item.num }}</span>
            <van-stepper v-model="item.num" />
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import LeftList from "../components/LeftList.vue";
import axios from "axios";
export default {
  name: "",
  components: {
    LeftList,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const data = reactive({
      active: "0", //当前激活的tab项
      baseInfo: {}, //基本信息
      goods: [], //商品列表+分类列表
      rightList: [], //右侧数据
      num: 0, //购买数量
      show: false, //弹窗层状态
      rateList: [], //评价列表
      colors: "#39f", //购物车图标默认颜色
    });
    // 请求数据
    axios.get("data.json").then((res) => {
      console.log(res);
      // 获取基本信息
      data.baseInfo = res.data.seller;
      // 获取商品列表+分类列表数据
      data.goods = res.data.goods;
      // 获取评价数据
      data.rateList = res.data.ratings;
      //获取热销榜数据
      getRights(0);
    });

    // 获取右侧数据
    const getRights = (val) => {
      data.goods.forEach((item, i) => {
        if (i == val) {
          data.rightList = item.foods;
          console.log(data.rightList);
        }
      });
    };
    // 加入购物车
    const add = (item) => {
      store.commit("add", item);
      // 打开弹框
      data.show = true;
      let arr = ["#f5f5f5", "#000", "#f36"];
      // Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1）
      //Math.round() 函数返回一个数字四舍五入后最接近的整数。
      // Math.ceil() 函数总是四舍五入并返回大于等于给定数字的最小整数。
      // Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
      let idx = Math.floor(Math.random() * 3);
      // 随机获取颜色
      data.colors = arr[idx];
      console.log(idx);
    };
    // 清空购物车
    const remove = () => {
      // 关闭弹框
      data.show = false;
      store.commit("remove");
    };
    const onSubmit = () => {};
    return {
      ...toRefs(data),
      getRights,
      add,
      onSubmit,
      remove,
    };
  },
};
</script>

<style scoped lang='scss'>
.box {
  ::v-deep .van-nav-bar {
    i {
      margin-right: 10px;
      font-size: 20px;
    }
  }
  .topInfo {
    padding: 10px;
    border-bottom: solid 1px #e5e5e5;
    .title {
      display: flex;
      justify-content: space-between;
      img {
        width: 40px;
        height: 40px;
      }
    }
    .psTime {
      font-size: 12px;
      i {
        margin-right: 10px;
      }
    }
    .tagBox {
      .van-tag {
        margin: 0 10px 5px 0;
      }
    }

    ::v-deep .van-notice-bar__content {
      font-size: 12px;
    }
  }
  .rightBox {
    position: fixed;
    width: 70%;
    left: 30%;
    height: calc(100% - 277px);
    background-color: #fff;
    overflow: scroll;
    .van-card {
      background-color: #fff;
      ::v-deep .van-card__footer {
        margin-top: -15px;
      }
      ::v-deep .van-tag {
        margin-right: 5px;
      }
    }
  }
  ::v-deep .van-submit-bar {
    z-index: 8888;
    i {
      font-size: 30px;
    }
  }
  ::v-deep .van-popup {
    bottom: 50px;
  }
  .cartList {
    .van-cell {
      background-color: #f2f2f2;
      ::v-deep span {
        font-size: 12px;
        color: #999;
      }
    }
    ul {
      padding: 10px 0;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        p {
          width: 40%;
        }
      }
    }
  }
  .rateBox {
    padding-bottom: 50px;
    ul {
      li {
        padding: 10px;
        border-bottom: solid 1px #e5e5e5;
        .rateTop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 5px;
          .leftBox {
            display: flex;
            img {
              width: 50px;
              height: 50px;
              margin-right: 5px;
            }
          }
        }
        .rateContent {
          margin-bottom: 5px;
        }
      }
    }
  }
  .business {
    padding-bottom: 50px;
    .my-swipe .van-swipe-item {
      img {
        width: 100%;
        height: 200px;
      }
    }
  }
}
</style>